<template>
    <div class="app-container">
        <div class="filter-container" style="margin-bottom: 20px;">
            <el-input v-model="listQuery.name" placeholder="名称" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus"
                @click="handleCreate">
                创建权限
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="名称">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="权限">
                <template slot-scope="scope">
                    {{ scope.row.code }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{row,$index}">
                    <el-button type="text" size="medium" icon="el-icon-edit" @click="handleUpdate(row)">编辑
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button size="medium" icon="el-icon-delete" type="text" @click="handleDelete(row, $index)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" @pagination="fetchData" /> -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :model="temp" :rules="rules" label-position="left" label-width="70px"
                style="width: 400px; margin-left:50px;">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="temp.name" />
                </el-form-item>
                <el-form-item label="权限" prop="code">
                    <el-input v-model="temp.code" :disabled="dialogStatus === 'create' ? false : true" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary"
                    @click="dialogStatus === 'create' ? createData() : updateData()">确认</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { permissionslist, permissionsput, permissionsdel, permissionspost } from '@/api/user'
import Pagination from 'element-ui'
export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: 'success',
                draft: 'gray',
                deleted: 'danger'
            }
            return statusMap[status]
        }
    },
    components: { Pagination },
    data() {
        return {
            total: 0,
            dialogFormVisible: false,
            listQuery: {
                name: null,
                page: 1,
                size: 10
            },
            list: null,
            listLoading: true,
            textMap: {
                update: '编辑权限',
                create: '新增权限'
            },
            dialogStatus: null,
            temp: {
                id: undefined,
                name: null,
                code: '',
            },
            rules: {
                name: [{ required: true, message: '必填', trigger: 'blur' }],
                code: [{ required: true, message: '必填', trigger: 'blur' }],
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const tempData = Object.assign({}, this.temp)
                    permissionspost(tempData).then(() => {
                        this.fetchData()
                        this.dialogFormVisible = false
                        this.$notify({
                            title: '创建成功',
                            type: 'success',
                            duration: 2000
                        })
                    })
                }
            })
        },
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    const tempData = Object.assign({}, this.temp)
                    permissionsput(this.temp.id,tempData).then(() => {
                        this.dialogFormVisible = false
                        this.$notify({
                            title: '更新成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.fetchData();
                    })
                }
            })
        },
        handleCreate() {
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        handleopen() {

        },
        handleUpdate(row) {
            this.temp = Object.assign({}, row)
            console.log(this.temp)
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        handleDelete(row, index) {
            this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // let temp = Object.assign({}, row.id)
                permissionsdel(row.id).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        resetTemp() {
            this.temp = {
                id: undefined,
                name: null,
                code: ''
            }
        },
        handleFilter() {
            // this.listQuery.page = 1
            this.fetchData()
        },
        fetchData() {
            this.listLoading = true
            permissionslist(this.listQuery).then(response => {
                console.log(response)
                this.list = response.data.content
                this.listLoading = false
            })
        }
    }
}
</script>